<template>
	<div class="theme">
		<van-nav-bar title="消息" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="noDate">
						<div style="padding-top: 10px;" v-for="item in list" :key="item.id">
							<div style="padding: 5px 15px;" @click="$router.push({path: '/NewsDetails',query: {id:item.id}})">
								<div style="background: #c7e6e4;padding: 10px;border-bottom: 8px solid #abd6ed;border-radius: 5px;">
									<div class="title" v-text="item.title">系统重要公告</div>
									<div class="time">{{item.createTime | formatDate}}</div>
								</div>
							</div>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	import { formatDate } from './../utils/date';
	export default {
		name: 'News',
		components: {},
		props: {},
		data() {
			return {
				size: 10, //每页数量
				total: '', //总数量
				list: [],
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				noDate: '没有更多了'
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: '/Mine'
				});
			},
			getList() {
				base.getNoticeservice({
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						if(this.list == ''){
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getList();
			}
		},
		created() {},
		mounted() {
			
		},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	/deep/ .van-nav-bar__text {
		color: white;
	}
	
	.title {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
	}
	
	.time {
		padding: 10px 0px;
		font-size: 12px;
		color: #7D7E80;
		padding-bottom: 0px;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>